<template>
    <a-row :gutter="16">
        <a-col :span="24">
            <a-card class="mb-2" :bordered="false">
                <a-row :gutter="16" class="pm-box">
                    <a-col :span="4">
                        <div class="pm-item">
                            <div class="pm-title"> 合同金额</div>
                            <div class="pm-info"> 100000.00 元 </div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="pm-item">
                            <div class="pm-title">项目成本</div>
                            <div class="pm-info"> 100000.00 元 </div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="pm-item">
                            <div class="pm-title"> 项目总预算</div>
                            <div class="pm-info"> 100000.00 元 </div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="pm-item">
                            <div class="pm-title"> 结算情况</div>
                            <div class="pm-info"> 100000.00 元 </div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="pm-item">
                            <div class="pm-title"> 开票情况</div>
                            <div class="pm-info"> 100000.00 元 </div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="pm-item">
                            <div class="pm-title"> 回款情况</div>
                            <div class="pm-info"> 100000.00 元 </div>
                        </div>
                    </a-col>
                </a-row>



            </a-card>
        </a-col>
    </a-row>
    <a-row :gutter="16">
        <a-col :span="12">
            <a-card title="项目信息" class="mb-2" :bordered="false">
                <a-row>
                    <a-col :span="8">
                        <p>项目名称：{{ info.name }}</p>
                    </a-col>
                    <a-col :span="8">
                        <p> 项目类型：{{ xmtypes.find(x => x.value == info.type)?.label }}</p>
                    </a-col>
                    <a-col :span="8">
                        <p>总交付文档：45</p>
                    </a-col>
                </a-row>
                <a-row :span="4">
                    <a-col :span="8">
                        <p>立项日期：{{ info.createTime?.substr(0, 10) }}</p>
                    </a-col>
                    <a-col :span="8">
                        <p> 隶属部门：{{ info.deptName || "无" }}</p>
                    </a-col>
                    <a-col :span="8">
                        <p>总预期文档：99 </p>
                    </a-col>

                </a-row>
                <a-row :span="4">
                    <a-col :span="24">
                        <p>项目编号：{{ info.code }}</p>
                    </a-col>

                </a-row>

            </a-card>
        </a-col>

        <a-col :span="12" class="mb-2">
            <div style="height: 100%;">
                <steps @onClose="onClose" :pro-id="proId"></steps>
            </div>
            <!-- <a-row :gutter="16">
                <a-col :span="12">
                    <cost :pro-id="proId"></cost>
                </a-col>
                <a-col :span="12">
                    <totaldoc :pro-id="proId"></totaldoc>
                </a-col>
            </a-row> -->
        </a-col>
    </a-row>
    <a-row :gutter="16" class="mb-2">
        <a-col :span="12">
            <taskinfo :pro-id="proId"></taskinfo>
        </a-col>
        <a-col :span="12">
            <newdoc :pro-id="proId"></newdoc>
        </a-col>

    </a-row>
    <!-- <a-row :gutter="16" class="mb-2">
        <a-col :span="8">
            <a-card title="结算情况" :bordered="false">
                <div class="flex justify-between items-center head-card">
                    <span>123300.00 元</span>
                    <a>明细</a>
                </div>
            </a-card>
        </a-col>
        <a-col :span="8">
            <a-card title="开票情况" :bordered="false">

                <div class="flex justify-between items-center head-card">
                    <span>123300.00 元</span>
                    <a>明细</a>
                </div>
            </a-card>
        </a-col>
        <a-col :span="8">
            <a-card title="回款情况" :bordered="false">
                <div class="flex justify-between items-center head-card">
                    <span>123300.00 元</span>
                    <a>明细</a>
                </div>
            </a-card>
        </a-col>
    </a-row> -->
</template>
<script setup>
import { progressOptions, roles, tbtypes, xmtypes } from '@/utils/constants.js'
import steps from './components/steps.vue'
import cost from './components/cost.vue'
import totaldoc from './components/totaldoc.vue'
import taskinfo from './components/taskinfo.vue'
import newdoc from './components/newdoc.vue'
const proId = ref(1000);
const info = ref({})
const changPm = () => {
    proId.value++
}
const visible = ref(false)
const show = (record) => {
    visible.value = true
    info.value = { ...record }
}

defineExpose({
    show
})
const emits = defineEmits(['OnClose'])
const onClose = (refresh) => {
    emits('OnClose', refresh)
};

</script>
<style scoped>
.head-card {
    font-weight: 600;
    margin: 2px;
    font-size: 18px
}

.pm-box .pm-item {
    background: #F3F7FA;
    border-radius: 3px 3px 3px 3px;
    padding: 10px;
}

.pm-title {
    /* font-weight: bold; */
    margin-bottom: 12px;
}

.pm-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 32px;
    font-weight: bold;
    color: #FF7A3F;
    font-size: 18px;
}

.pm-info a {
    font-weight: 400;
    font-size: 13px
}
</style>